<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <title>魔方盒子</title>
    <meta name="description" content="纯CSS3实现3D旋转动画和渐变事件">
    <!--能用CSS实现的就别用JS-->
    <link rel="stylesheet" href="3d.css">
</head>
<body>

<div class="wrap" id="wrap">
    <!--包裹所有元素的容器-->
    <div class="cube">
        <!--正方体-->
        <!--前面图片 -->
        <div class="out_front">
            <img src="images/1.jpg" class="pic">
        </div>
        <!--后面图片 -->
        <div class="out_back">
            <img src="images/2.jpg" class="pic">
        </div>
        <!--左面图片 -->
        <div class="out_left">
            <img src="images/3.jpg" class="pic">
        </div>
        <!--右面图片 -->
        <div class="out_right">
            <img src="images/4.jpg" class="pic">
        </div>
        <!--上面图片 -->
        <div class="out_top">
            <img src="images/5.jpg" class="pic">
        </div>
        <!--下面图片 -->
        <div class="out_bottom">
            <img src="images/6.jpg" class="pic">
        </div>

    </div>

</div>


<script src="3d.js"></script>

</body>
</html>